<template>
  <div class="ChooseImage">
    <div class="ShowImage">
      <div class="text" v-if="url==''">暂无图片生产</div>
        <el-image v-if="url!=''"
            style="width: 488px; height: 450px;"
            :src="url"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="srcList"
            :initial-index="4"
            fit="cover"
        />
    </div>
    <el-input v-model="input" style="width: 100%;" placeholder="输入需要的内容" />
    <el-select v-model="value" clearable placeholder="Select">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <el-button @click="getValue" type="primary">生产图片</el-button>
  </div>
</template>

<script>
import http from '../../src/utils/request.js'
export default {
name: "ImageTypeChoice",
  data(){
  return{
    Message:{
      value:'',
      type:''
    },
    input:'',
    url :
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    // https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg
    srcList:[
      'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      // https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg
    ],
    options :[
      {
        value: '写实类型',
        label: '写实类型',
      },
      {
        value: '赛博朋克',
        label: '赛博朋克',
      },
      {
        value: '古风',
        label: '古风',
      },
      {
        value: '机械感',
        label: '机械感',
      },
      {
        value: '电影质感',
        label: '电影质感',
      },
    ],
    value:'写实类型'
  }
  },
  methods:{
    getValue(){
      if (this.value!=''&&this.input!=''){
        let url=''
        this.Message.type=this.value
        this.Message.value=this.input
        console.log(this.Message)
        alert("请求成功")
        http.post('http://127.0.0.1:5000/getImg',this.Message).then(function (res){
           url=res.data
        })
        this.url=url
      }
      else {
        alert("请输入内容")
      }
    }
  }
}
</script>

<style scoped lang="less">
.ChooseImage{
  position: absolute;
  top: 146px;
  left: 800px;
  float: right;
  .ShowImage{
    background-color: #ededed;
    height: 450px;
    width: 488px;
  }
  .text{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
  }
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>